<!DOCTYPE html>
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
	<meta charset="@@{website_charset}" />
	<title>Form Elements Style 2 - @@{website_title}</title>	
	@@include('./src/components/_global/include-header.html')
</head>  

     
  <body class="page">
  
  
          
    @@include('./src/components/_global/include-loader.html')
    @@include('./src/components/_global/include-toggle-trigger.html')
    
    

  
  
    <div class="uix-wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="uix-header__container">
            
             <div class="uix-header">
                 <div class="container">
                 
                        @@include('./src/components/_global/include-brand.html')
                        
                        @@include('./src/components/_global/include-menu.html')
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="uix-clearfix"></div>
             </div>
        
        </header>
        <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
      
     
		<main id="uix-maincontent">
			
			<!-- Content 
			====================================================== -->
			<section class="uix-spacing--s uix-spacing--no-bottom">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<h3>Inputs</h3>
							<hr>
							
							
						</div>
					</div>
					<!-- .row end -->

				</div>
				<!-- .container end -->

			</section>
			
			


		   <!-- Content 
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container">


						<div class="row">
							<div class="col-12">



									 <form method="post" action="#" id="app-my-form">


									   <div class="row">
											<div class="col-12">

												Text: 
												<div class="uix-controls uix-controls--line">
												  <input type="text" class="js-uix-float-label" value="" name="sname" maxlength="50">
												  <label>Input Normal</label>

												</div>

												Text: 
												<div class="uix-controls uix-controls--line">
												  <input type="text" class="js-uix-float-label" value="" name="ename" maxlength="50">
												  <label>Input Normal</label>
												</div>



											</div>  


										</div>
										<!-- .row end -->  



									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-success">
												  <input type="text" class="js-uix-float-label" value="Success" name="sname" maxlength="50">
												  <label>Input Name</label>

												</div>

											</div>  

											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-error">
												  <input type="text" class="js-uix-float-label" value="Error" name="ename" maxlength="50">
												  <label>Input Name</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->  



									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-disabled">
												  <input type="text" class="js-uix-float-label" value="Text" name="d-name" disabled>
												  <label>Disabled Input</label>

												</div>

											</div>  

											<div class="col-sm-6 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__select is-disabled">
													<label>
														<select name="selectname">
															<option value="Option 1">Option 1</option>
															<option value="Option 2">Option 2</option>
															<option value="Option 3">Option 3</option>
														</select>

													</label>
													<span>Disabled Select</span>

												</div>
											</div>  			


										</div>
										<!-- .row end -->  



									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth">
												  <input type="text" class="js-uix-float-label required" name="first-name">
												  <label>First Name<span class="uix-controls__im">*</span></label>
												</div>

											</div>  

											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth">
												  <input type="text" class="js-uix-float-label" name="last-name">
												  <label>Last Name</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->  


									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-iconic">
												  <i class="fa fa-user-o" aria-hidden="true"></i>
												  <input type="text" class="js-uix-float-label required" name="first-name">
												  <label>With Icons<span class="uix-controls__im">*</span></label>
												</div>

											</div>  

											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-iconic">
												  <i class="fa fa-feed" aria-hidden="true"></i>
												  <input type="text" class="js-uix-float-label" name="last-name">
												  <label>With Icons</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->  




									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-iconic is-reversed">
												  <i class="fa fa-user-o" aria-hidden="true"></i>
												  <input type="text" class="js-uix-float-label" name="first-name">
												  <label>With Icons</label>
												</div>

											</div>  

											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line is-fullwidth is-iconic is-reversed">
												  <i class="fa fa-feed" aria-hidden="true"></i>
												  <input type="text" class="js-uix-float-label" name="last-name">
												  <label>With Icons</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->  



									   <div class="row">
											<div class="col-sm-6">

												<div class="uix-controls uix-controls--line uix-controls__normal-select">
													<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
													<select name="country">
														<option value="Option 1">Option 1</option>
														<option value="Option 2">Option 2</option>
														<option value="Option 3">Option 3</option>
													</select>
													<label>Select</label>


												</div>


												<div class="uix-controls uix-controls--line uix-controls__normal-select">
													<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
													<select name="country">
														<option value="Option 1">Option 1</option>
														<option value="Option 2">Option 2</option>
														<option value="Option 3">Option 3</option>
													</select>
													<label>Select</label>


												</div>


											</div>  

										</div>
										<!-- .row end --> 	


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__normal-select is-fullwidth">
													<span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
													<select class="js-uix-float-label">
														<option value="blank"></option>
														<option value="Apple">Apple</option>
														<option value="Banana">Banana</option>
														<option value="Kiwi">Kiwi</option>
														<option value="Orange">Orange</option>
														<option value="Watermelon">Watermelon</option>
													</select>
													<label>Select Arrow</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 		



									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__select">
													<label>
														<select name="selectname">
															<option value="Option 1">Option 1</option>
															<option value="Option 2">Option 2</option>
															<option value="Option 3">Option 3</option>
														</select>

													</label>
													<span>Custom Select</span>

												</div>

											</div>  

										</div>
										<!-- .row end --> 		


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__select is-fullwidth">
													<label>
														<select name="selectname">
															<option value="">Full Width Select</option>
															<option value="Option 1">Option 1</option>
															<option value="Option 2">Option 2</option>
															<option value="Option 3">Option 3</option>
														</select>

													</label>

												</div>

											</div>  

										</div>
										<!-- .row end -->  	 	 	 	 	  	  	 


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line uix-controls__select uix-controls__select--top is-pill">
													<label>
														<select name="selectname">
															<option value="Option 1">Option 1</option>
															<option value="Option 2">Option 2</option>
															<option value="Option 3">Option 3</option>
														</select>

													</label>
													<span>Custom Select -Converse</span>

												</div>

											</div>  

										</div>
										<!-- .row end --> 		 	     	 	 	 	 	 




									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__short-s">
												  <input type="text" class="js-uix-float-label" name="shortinput1">
												  <label>Short Input 1</label>unit
												</div>
											</div>  

										</div>
										<!-- .row end -->



									   <div class="row">
											<div class="col-12 uix-t-m">
												<div class="uix-controls uix-controls--line uix-controls__short-m">
												  <input type="text" class="js-uix-float-label" name="shortinput1">
												  <label>Short Input 2</label>unit
												</div>
											</div>  

										</div>
										<!-- .row end -->         


									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__short-l">
												  <input type="text" class="js-uix-float-label" name="shortinput2">
												  <label>Short Input 3</label>unit
												</div>
											</div>  

										</div>
										<!-- .row end -->


									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__multi-sel" data-targetid="my-multi-selector-name-1">
													<span aria-checked="false" role="checkbox" data-value="1">facebook<i class="fa fa-check no"></i></span>
													 <span aria-checked="false" role="checkbox" data-value="2">twitter<i class="fa fa-check no"></i></span>
													 <span aria-checked="false" role="checkbox" data-value="3">google_plus<i class="fa fa-check no"></i></span>
													 <span aria-checked="false" role="checkbox" data-value="4">pinterest<i class="fa fa-check no"></i></span>
												</div>

												<input type="hidden" id="my-multi-selector-name-1" name="my-multi-selector-name-1" value="1,3">

											</div>  

										</div>
										<!-- .row end -->



									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__single-sel" data-targetid="my-cus-radio-name-1">
													 <span aria-checked="false" role="radio" data-value="1">facebook</span>
													 <span aria-checked="false" role="radio" data-value="2">twitter</span>
													 <span aria-checked="false" role="radio" data-value="3">google_plus</span>
													 <span aria-checked="false" role="radio" data-value="4">pinterest</span>
												</div>

												<input type="hidden" id="my-cus-radio-name-1" name="my-cus-radio-name-1" value="2">

											</div>  

										</div>
										<!-- .row end -->




									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__short-l uix-controls__date">
												  <input  type="text" class="js-uix-float-label" name="shortinput3"
														  autocomplete="off" 
														  data-picker="true" 
														  data-picker-min-date="0"
														  data-picker-max-date="+2050/01/01"
														  data-picker-format="Y-m-d H:i:s" 
														  data-picker-timepicker="true" 
														  data-picker-lang="en">
												  <label>Date 1</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->    

									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__short-l uix-controls__date">
												  <input  type="text" class="js-uix-float-label" name="shortinput3-2"
														  autocomplete="off" 
														  data-picker="true" 
														  data-picker-min-date="-2016/01/01"
														  data-picker-max-date="0"
														  data-picker-format="M d, Y" 
														  data-picker-timepicker="false" 
														  data-picker-lang="en">
												  <label>Date 2</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->   			 




									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls uix-controls--line is-fullwidth">
													<input type="text" class="js-uix-float-label" name="name">
													<label>Name</label>
												</div>
											</div>  

										</div>
										<!-- .row end -->


									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line is-fullwidth">
													<input type="tel" class="js-uix-float-label" name="cell">
													<label>Celly</label>
												</div>
											</div>  

										</div>
										<!-- .row end -->


									   <div class="row">
											<div class="col-12 uix-t-l">
												<div class="uix-controls uix-controls--line uix-controls__textarea is-fullwidth">
												  <textarea rows="5" name="comments" class="js-uix-float-label"></textarea>
												  <label>Comments</label>
												</div>
											</div>  

										</div>
										<!-- .row end -->          



									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__radio">
													<label>
														<input type="radio" name="radioname" checked>Radio Name
													</label>
													<label>
														<input type="radio" name="radioname">Radio Name
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 	   
                                         
                                         

									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__radio is-disabled">
													<label>
														<input type="radio" name="radioname2">Disabled Radio Name 1
													</label>
													<label>
														<input type="radio" name="radioname2" checked>Disabled Radio Name 2
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 	    
  


									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__checkbox">
													<label>
														<input type="checkbox" name="checkboxname">Checkbox
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 

									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__checkbox is-disabled">
													<label>
														<input type="checkbox" name="checkboxname">Disabled Checkbox
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end --> 



									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls--line uix-controls__number">
													<input type="number" step="0.01" min="0" class="js-uix-float-label" name="numberdemo1" value="1">
													<span class="uix-controls__number__btn uix-controls__number__btn--add" data-step="1">+</span>
													<span class="uix-controls__number__btn uix-controls__number__btn--remove" data-step="1">-</span>
												</div>

											</div>  

										</div>
										<!-- .row end --> 	     


									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__toggle is-disabled" data-off-text="off" data-on-text="on">
													<label>
														<input type="checkbox" name="togglename">
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->       
                                         

									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__toggle" data-off-text="off" data-on-text="on">
													<label>
														<input type="checkbox" name="togglename">
													</label>
												</div>

											</div>  

										</div>
										<!-- .row end -->            	 	 	 

									   <div class="row">
											<div class="col-12">

												<div class="uix-controls uix-controls__toggle is-pill" data-off-text="off" data-on-text="on" data-targetid="my-toggle-name-1">
													<label>
														<input type="checkbox" name="togglename2" checked>
													</label>
												</div>

												<div id="my-toggle-name-1" style="padding: 10px; background: #d2ff52; background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); margin: 5px 0 15px 0; max-width: 300px;">Switch</div>

											</div>  

										</div>
										<!-- .row end -->   


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls__file-container uix-t-l">  
													<input type="file" id="my-file">
													<label tabindex="0" for="my-file" class="uix-controls__file-trigger"><i class="fa fa-upload" aria-hidden="true"></i>Upload File</label>
												</div>
												<p class="uix-controls__file-return uix-t-l"></p>

											</div>  

										</div>
										<!-- .row end -->


									   <div class="row">
											<div class="col-12 uix-t-l">

												<div class="uix-controls__file-field-container">
													<div class="uix-controls__file-field-trigger">
													  <div>
														  <input type="file" accept="image/*"  data-title="Drag and drop a file here">
													  </div>
													</div>

												</div>

											</div>  

										</div>
										<!-- .row end -->							 


									   <div class="row">
											<div class="col-12 uix-t-l">
												<p class="uix-t-l">
												  <button type="submit" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Submit Your Info</button>
												</p> 

											</div>  

										</div>
										<!-- .row end -->   


									   <span class="response"></span>

									</form>


							</div>     


						</div>
						<!-- .row end -->  


				</div>
				<!-- .container end -->



			</section>
			
		</main>
		
		
			
        

        
        @@include('./src/components/_global/include-copyright.html')
        
        
    </div>
    <!-- .uix-wrapper end -->
       
	  

	<script>
	( function( $ ) {
	"use strict";

		$( function() {

			/* 
			 ---------------------------
			 Input Validation 
			 ---------------------------
			 */ 
			$(document).off( 'submit' ).on( 'submit', '#app-my-form', function(e) {

				var $form        = $( this ),
					validationOK = true,
					emailRe      = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/igm,
					numReg       = /^\d+$/;


				//Radio
				var radioVal = $form.find( '[name="radioname"]:checked' ).val();

				if ( radioVal == '' || typeof radioVal == typeof undefined ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> This value of radio cannot be left blank.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );	

					validationOK = false;
				}


				//Email
				var emailVal = $form.find( '[name="email"]' ).val();
				if ( emailVal != '' && !emailRe.test( emailVal ) && typeof emailVal != typeof undefined ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> A valid email address.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );

					$form.find( '[name="email"]' ).focus();

					validationOK = false;
				}


				//Required Fields
				$form.find( '.required' ).each( function()  {


					if ( $( this ).val() == '' ) {

						var _ft = $( this )
										.closest( '.row' )
										.find( '[class*=col-]' )
										.html();


						if ( _ft.indexOf( '</select>' ) >= 0 ) {
							_ft = _ft.replace(/<select[\s\S]*<\/select>/ig, '' )
									 .replace(/<span\sclass=\"uix-controls\_\_select\-trigger\">[\s\S]*<\/span>/ig, '' );


						}


						var info = _ft.replace(/(&nbsp;|<([^>]+)>|\*)/ig, '' );

						$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> "'+info+'" Can not be empty.</p>' );

						setTimeout( function(){
							$form.find( '.response' ).html( '' );
						}, 3000 );

						$( this ).focus();

						validationOK = false;

						//break this loop
						return false;

					}



				});




				//Checkbox
				if ( validationOK && !$form.find( '[name="checkboxname"]' ).get(0).checked ) {
					$form.find( '.response' ).html( '<p class="uix-striking-msg uix-striking-msg--danger"><i class="fa fa-times" aria-hidden="true"></i> This value of checkbox cannot be left blank.</p>' );

					setTimeout( function(){
						$form.find( '.response' ).html( '' );
					}, 3000 );	

					validationOK = false;
				}



				if ( validationOK ) {
					return true;
				} else {
					return false;
				}

			});  	


		} );


	} ) ( jQuery );	

	</script> 

	  
       
    @@include('./src/components/_global/include-footer.html')

